import { GetUserInfo, MoneyBeans, UserVip } from '@/api/user';
import Empty from '@/components/Empty';
import { Button, Tab, Tabs } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';
import useRecharge from './components/useRecharge';

export default function Page() {
  const { renderNode: renderRechargeNode, open: openRecharge } = useRecharge();
  const { data: user } = useRequest(GetUserInfo);
  const [tabName, setTabName] = useState<'1' | '2'>('1');
  const { data: list } = useRequest(() => MoneyBeans({ type: tabName }), {
    refreshDeps: [tabName],
  });

  const { data: vip } = useRequest(UserVip);

  return (
    <>
      <View
        className=' pt-[260px] pb-[200px] min-h-screen bg-no-repeat'
        style={{
          backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/bg-bangdou.png)`,
          backgroundSize: '100% auto',
          backgroundPosition: 'center top',
        }}
      >
        <View
          className='w-[638px] h-[218px] bg-cover mx-auto pt-[40px] pl-[50px]'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/head-bg-bangdou.png)`,
          }}
        >
          <View className=' flex items-center leading-none'>
            <Text className=' text-lg font-bold'>帮豆</Text>
            <Text className=' text-3xl text-black font-bold italic ml-5'>
              {user?.beans || 0}
            </Text>
          </View>
        </View>

        <View className=' rounded-lg overflow-hidden mx-2 pb-4 bg-white'>
          <Tabs
            animated
            className=' text-base'
            lineWidth={160}
            onChange={(e) => {
              setTabName(e.detail?.name as '1' | '2');
            }}
          >
            <Tab title='帮豆收入明细' name='1' />
            <Tab title='帮豆支出明细' name='2' />
          </Tabs>
          {Boolean(!list?.length) && (
            <View className='pt-[100px]'>
              <Empty
                icon={
                  <Image
                    src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/empty-1.png'
                    className=' w-[381px] h-[311px] block -mb-[50px]'
                  />
                }
                title={
                  (tabName === '1' && '你还没有帮豆，快去充值吧') ||
                  '你还没有帮豆支持记录'
                }
                desc='帮豆可用于线下活动和专家咨询等平台服务'
              />
            </View>
          )}

          <View className='p-4'>
            {list?.map((item) => (
              <View
                className='border-b border-solid border-gary2 py-4 last:border-none'
                key={item.id}
              >
                <View className='flex text-black font-bold text-sm'>
                  <Text>{item.msg}</Text>
                  <Text className='ml-auto'>
                    {tabName === '1' ? '+' : '-'}
                    {item.money}
                  </Text>
                </View>
                <View className='flex text-xs text-gary4 mt-2'>
                  <Text>{item.biz_name}</Text>
                  <Text className=' block ml-auto'>{item.create_time}</Text>
                </View>
              </View>
            ))}
          </View>
        </View>

        <View
          className='fixed left-0 right-0 bottom-0 px-4 py-2 bg-white fixed-container-shadow'
          style={{
            paddingBottom: 'calc(env(safe-area-inset-bottom))',
          }}
        >
          <View className=' text-xs text-gary4 text-center block mb-2'>
            您有{user?.points}积分可兑换帮豆
            <Text
              className=' text-primary font-bold'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/my/integral/index`,
                });
              }}
            >
              去兑换
            </Text>
          </View>
          <Button
            type='primary'
            size='large'
            onClick={() => openRecharge()}
            disabled={vip?.applying || Boolean(user?.vip)}
          >
            {vip?.applying
              ? `已申请会员，正在审核中`
              : user?.vip
              ? `您已是${user.vip === 1 ? '金' : '银'}卡会员`
              : '开通会员'}
          </Button>
        </View>
      </View>

      {renderRechargeNode()}
    </>
  );
}
